Xceed Toolkit Plus for WPF v4.6 Documentation
Creating Your First ListBox Project
Welcome to Xceed Toolkit Plus for WPF v4.6 > Getting Started > Creating Your First ListBox Project

Begin by creating a new application from the installed templates. Once the new project is created, the control will be available in the toolbox and can be dragged onto the design surface.

If you prefer, you can add the references to the appropriates assemblies manually by right-clicking on the main project and selecting the Add Reference... menu item, which will open the Add Reference dialog box in which you can select the assemblies from the .NET tab. Now that the assemblies have been added, the required namespaces, which are included within the schema context, must be mapped using the xmlns attribute. 

For the ListBox control itself:

xmlns:xclb="http://schemas.xceed.com/wpf/xaml/listbox"

For its themes:

xmlns:xclt="http://schemas.xceed.com/wpf/xaml/listbox/themes"

Remember to use the namespace prefix (xctk:) in the body of your XAML!

The schema collection holds the following main namespaces:

Namespace Description
Xceed.Wpf. Contains classes, interfaces, and enumerations related to data navigation.
Xceed.Wpf.Data Contains all data-management related classes, interfaces, enumerations, and structs.
Xceed.Wpf.Stats Contains all the statistical-related classes.
Xceed.Wpf.DragDrop Contains all the classes related to the drag and drop capabilities of the listbox control.
Xceed.Wpf.ListBox Contains the classes needed to use the listbox control.
Xceed.Wpf.ListBox.Converters Contains all the converter classes.

The schema collection for the themes holds the following namespaces:

Namespace Description
Xceed.Wpf.ListBox.Themes.LiveExplorer Contains the LiveExplorer theme for use with the listbox control.
Xceed.Wpf.ListBox.Themes.Metro Contains the Metro theme for use with the listbox control.
Xceed.Wpf.ListBox.Themes.Office2007 Contains the Office 2007 themes (black, blue, and silver) for use with the listbox control.
Xceed.Wpf.ListBox.Themes.WMP11 Contains the Windows Media Player themes for use with the listbox control.

Add a using statement for C# files or an Imports statement for VB.NET for the assemblies that you need:

using Xceed.Wpf.ListBox;
Imports Xceed.WPF.ListBox

Binding the ItemsSource

This first code example demonstrates how to create a collection of Employee and create a property named "Employees" to which the ListBox will be bound. The code should be placed in the MainWindow.xaml.cs file.

C#
Copy Code 
 public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
      this.DataContext = this;
      this.Employees = new ObservableCollection<Employee>()
      {
        new Employee() { Experience = 25, FirstName = "Joe", LastName = "Blow", Department = "Administration" },
        new Employee() { Experience = 10, FirstName = "Jane", LastName = "Doe", Department = "Production" },
        new Employee() { Experience = 5, FirstName = "Mike", LastName = "Smith", Department = "Production"},
        new Employee() { Experience = 7, FirstName = "Kathy", LastName = "Jones", Department = "Administration" },
        new Employee() { Experience = 21, FirstName = "Kelly", LastName = "Campbell", Department = "Production" },
        new Employee() { Experience = 1, FirstName = "John", LastName = "Krugg", Department = "Production" },
        new Employee() { Experience = 9, FirstName = "Michele", LastName = "Pollock", Department = "Administration" },
        new Employee() { Experience = 14, FirstName = "Wong", LastName = "Mingh", Department = "Production"},
        new Employee() { Experience = 15, FirstName = "Leo", LastName = "Kopernick", Department = "Director" },
        new Employee() { Experience = 21, FirstName = "Jenny", LastName = "Carter", Department = "Production" },
      };
    }
    public ObservableCollection<Employee> Employees
    {
      get;
      set;
    }
  }
  public class Employee
  {
    public string FirstName
    {
      get;
      set;
    }
    public string LastName
    {
      get;
      set;
    }
    public int Experience
    {
      get;
      set;
    }
    public string Department
    {
      get;
      set;
    }
  }

The next example demonstrates how to bind a ListBox to the Employee collection, which is retrieved through the Employees property implemented in the code above.

XAML
Copy Code 
<Window x:Class="ListBoxSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:_150276"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:xclb="http://schemas.xceed.com/wpf/xaml/listbox"
        Title="ListBoxSample"
        Width="500"
        Height="400">
    <Grid>
      <xclb:ListBox x:Name="_listBox"
                    ItemsSource="{Binding Employees}"
      </xclb:ListBox>
  </Grid>
</Window>

But since the displayed items will be Employees, we need to specify how each Employee will be shown in the ListBox. This can be done through the ItemTemplate property. In the next example, the ItemTemplate property is defined in a Resource as a DataTemplate. TextBlocks are positionned to display the wanted information for each Employee. Since the DataContext of each Employee will be himself, we can bind directly to the Employee properties:

XAML
Copy Code 
<Window.Resources>
    <DataTemplate x:Key="employeeListBoxItemTemplate">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="150"/>
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="{Binding FirstName}"
                    FontWeight="Bold"
                    Margin="10" />
          <TextBlock Text="{Binding LastName}"
                    FontWeight="Bold"
                    Margin="10" />
        </StackPanel>
        <StackPanel Grid.Column="1"
                    Orientation="Horizontal">
          <TextBlock Text="Years of experience: "
                    Margin="10" />
          <TextBlock Text="{Binding Experience}"
                    FontWeight="Bold"
                    Margin="10" />
        </StackPanel>
      </Grid>
    </DataTemplate>  
</Window.Resources>
<Grid>
    <xclb:ListBox x:Name="_listBox"
                  ItemsSource="{Binding Employees}"
                  ItemTemplate="{StaticResource employeeListBoxItemTemplate}"              
    </xclb:ListBox>
</Grid>

Now that the ListBox is showing clearly all the Employees, we could need to search one of them by its FirstName or LastName. The next example shows how to do that by specifying which Employee properties can be filtered:

XAML
Copy Code 
<Window.Resources>
    ...
    <xclb:FieldNameList x:Key="filteredFieldNameList">
      <sys:String>FirstName</sys:String>
      <sys:String>LastName</sys:String>
    </xclb:FieldNameList>  
</Window.Resources>
<Grid>
    <xclb:ListBox x:Name="_listBox"
                  ItemsSource="{Binding Employees}"
                  ItemTemplate="{StaticResource employeeListBoxItemTemplate}"
                  xclb:SearchTextBox.FilteredFieldNames="{StaticResource filteredFieldNameList}">
    </xclb:ListBox>
</Grid>

Then, we could want to group the Employees by Department since each one is affected to a department. The next sample specifies the Employee property to use for grouping:

XAML
Copy Code 
<Grid>
    <xclb:ListBox x:Name="_listBox"
                  ItemsSource="{Binding Employees}"
                  ItemTemplate="{StaticResource employeeListBoxItemTemplate}">
      <xclb:ListBox.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Department" />
      </xclb:ListBox.GroupDescriptions>
    </xclb:ListBox>
</Grid>

Now that the list is grouped, we could search for a specific group by typing the first letter of the group inside the DataNavigationControl button located in the group bars. The next example will use an AlphabeticalDataNavigationConfiguration to display all the letters that can be chosen when searching for a group:

XAML
Copy Code 
<Grid>
    <xclb:ListBox x:Name="_listBox"
                  ItemsSource="{Binding Employees}"
                  ItemTemplate="{StaticResource employeeListBoxItemTemplate}"
                  xclb:SearchTextBox.FilteredFieldNames="{StaticResource filteredFieldNameList}">
      <xclb:ListBox.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Department" />
      </xclb:ListBox.GroupDescriptions>
      <xclb:DataNavigationControl.DataNavigationConfiguration>
        <xclb:AlphabeticalDataNavigationConfiguration />
      </xclb:DataNavigationControl.DataNavigationConfiguration>
    </xclb:ListBox>
</Grid>

Here's the full example in XAML:

XAML
Copy Code 
<Window x:Class="ListBoxSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:_150276"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:xclb="http://schemas.xceed.com/wpf/xaml/listbox"
        Title="ListBoxSample"
        Width="500"
        Height="400">
  <Window.Resources>
    <DataTemplate x:Key="employeeListBoxItemTemplate">
      <Grid>
        <Grid.ColumnDefinitions>
          <ColumnDefinition Width="150"/>
          <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <StackPanel Orientation="Horizontal">
          <TextBlock Text="{Binding FirstName}"
                    FontWeight="Bold"
                    Margin="10" />
          <TextBlock Text="{Binding LastName}"
                    FontWeight="Bold"
                    Margin="10" />
        </StackPanel>
        <StackPanel Grid.Column="1"
                    Orientation="Horizontal">
          <TextBlock Text="Years of experience: "
                    Margin="10" />
          <TextBlock Text="{Binding Experience}"
                    FontWeight="Bold"
                    Margin="10" />
        </StackPanel>
      </Grid>
    </DataTemplate>
    <xclb:FieldNameList x:Key="filteredFieldNameList">
      <sys:String>FirstName</sys:String>
      <sys:String>LastName</sys:String>
    </xclb:FieldNameList>
  
  </Window.Resources>
    <Grid>
    <xclb:ListBox x:Name="_listBox"
                  ItemsSource="{Binding Employees}"
                  ItemTemplate="{StaticResource employeeListBoxItemTemplate}"
                  xclb:SearchTextBox.FilteredFieldNames="{StaticResource filteredFieldNameList}">
      <xclb:ListBox.GroupDescriptions>
        <PropertyGroupDescription PropertyName="Department" />
      </xclb:ListBox.GroupDescriptions>
      <xclb:DataNavigationControl.DataNavigationConfiguration>
        <xclb:AlphabeticalDataNavigationConfiguration />
      </xclb:DataNavigationControl.DataNavigationConfiguration>
    </xclb:ListBox>
  </Grid>
</Window>

 

Licensing

The last step is to license Xceed DataGrid for WPF by setting the property. Refer to the Licensing topic for detailed information on how to license the component for distribution.

 

 

Copyright Xceed Software Inc

Send Feedback